import React, { Component } from "react";
import { Form, Input, Button, Icon, Modal, PageHeader } from "antd";
import Axios from "axios";
class index extends Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        // 写登录判断
        const Axioss = Axios.create({
          baseURL: "http://chenxu.online:3003"
        });

        // 登录的api请求
        const setApi = () => {
          return Axioss.post("/register", values);
        };
        // 处理返回的函数
        setApi().then(err => {
          if (err.data.code === 1) {
            // 弹出注册成功
            this.success("注册成功！");
            // 注册成功跳转到登录
            window.sessionStorage.setItem("user", values.username);
            this.props.history.replace("/login/login");
          } else {
            // 弹出错误
            // window.sessionStorage.getItem(values);
            console.log(values.username);
            this.props.history.replace("/login/register");
            this.error("用户已注册！");
          }
        });
      }
    });
  };
  // 失败弹框
  error = data => {
    Modal.error({
      title: "用户提示！",
      content: data
    });
  };
  // 成功弹框
  success = data => {
    Modal.success({
      content: data
    });
  };

  compareToFirstPassword = (rule, value, callback) => {
    const { form } = this.props;
    if (value && value !== form.getFieldValue("password")) {
      callback("两次密码不一致!");
    } else {
      callback();
    }
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <>
        <PageHeader
          style={{
            border: "1px solid rgb(235, 237, 240)"
          }}
          onBack={() => {
            this.props.history.replace("/login/account");
          }}
          title="返回"
        />
        <Form onSubmit={this.handleSubmit} className="login-form">
          <Form.Item>
            {getFieldDecorator("username", {
              rules: [{ required: true, message: "请输入用户名!" }]
            })(
              <Input
                prefix={
                  <Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />
                }
                placeholder="用户名"
              />
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator("password", {
              rules: [
                {
                  required: true,
                  message: "请输入密码!"
                },
                {
                  validator: this.validateToNextPassword
                }
              ]
            })(
              <Input.Password
                prefix={
                  <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
                }
                placeholder="密码"
              />
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator("confirm", {
              rules: [
                {
                  required: true,
                  message: "请确定密码!"
                },
                {
                  validator: this.compareToFirstPassword
                }
              ]
            })(
              <Input.Password
                prefix={
                  <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
                }
                type="password"
                placeholder="密码"
              />
            )}
          </Form.Item>

          <Form.Item>
            <Button block type="primary" htmlType="submit">
              注册
            </Button>
          </Form.Item>
        </Form>
      </>
    );
  }
}
const WrappedRegistrationForm = Form.create({ name: "register" })(index);
export default WrappedRegistrationForm;
